<template>
    <div class="contextMenu" ref="contextMenu" :style="pos">
        <div class="menuCon" v-for="(k,i) in menu" :key="i" @click="goBack(k.fun)">{{k.name}}</div>
    </div>
</template>

<script>
export default {
	props: ['menu', 'pos'],
	mounted() {
		//   console.log(this.pos)
		// this.$refs.contextMenu.style.left = this.pos.x;
		// this.$refs.contextMenu.style.top = this.pos.y;
		//   console.log(this.$refs.contextMenu.style)
	},
	methods: {
		goBack(fun) {
			this.$emit(fun)
		}
	}
};
</script>

<style lang="scss">
.contextMenu {
    position: fixed;
    z-index: 10;
    background: rgba(16, 34, 67, 0.9);
    border: 1px solid rgba(96, 118, 173, 0.35);
    font-size: 12px;
    color: rgba(255, 255, 255, 1);
    padding: 5px ;
    .menuCon {
        width: 140px;
        cursor: pointer;
        padding: 5px 10px;
    }
    .menuCon:hover {
        color: rgba(47, 213, 255, 1);
    }
}
</style>